<template>
  <div>
    <dg-page-code type="403" :title="title" :en="en" :msg-list="msgList" :advice="advice" is-advice>
      <div>
        <h2 class="dg-page-code__title">{{ title }}</h2>
        <h4 class="dg-page-code__en">{{ en }}</h4>
        <ul class="dg-page-code__msg">
          <li v-for="(item, index) in msgList" :key="index">{{ item }}</li>
        </ul>
        <div class="dg-page-code__advice">
          <p class="dg-page-code__tip">您可以选择：</p>
          <ul class="dg-page-code__option">
            <li>
              <a class="dg-page-code__link" style="cursor: pointer;" @click="logout">退出，重新登录</a>
            </li>
          </ul>
        </div>
      </div>
    </dg-page-code>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '抱歉！您没有操作权限',
      en: 'Sorry, service resources are not available !',
      msgList: ['No operational permission !', 'Please contact your administrator !'],
      advice: [
        {
          label: '返回首页',
          link: ''
        }
      ]
    };
  },
  methods: {
    logout() {
      this.$dgConfirm('是否确定退出系统?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'confirm_user',
        cancelButtonClass: 'btn-custom-cancel',
        confirmButtonClass: 'btn-custom-submit',
        closeOnClickModal: false,
        type: 'warning'
      })
        .then(() => {
          window.loginUtil.logout(this);
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.dg-page-code {
  margin-top: 42px;
}
</style>
